<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<jsp:include page="include/base.jsp"/>
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
  <title>怡天网-体检预约</title>
  <meta name="Keywords" content="怡天体检">
  <meta name="Description" content="怡天体检">
  <link rel="stylesheet" href="${Base}/css/weui.css"/>
  <link rel="stylesheet" href="${Base}/css/jquery-weui.1115.css"/>
  <script language="JavaScript" src="${Base}/js/reserveinst-xlt-1108.js"></script>
</head>
<body>
<div class="container" id="container">
  <div class="page" id="reservePage">
    <div class="page__hd">
      <!-- img src="${Base}/images/top_logo.jpg"/ -->
      <!-- h1 class="page__title">在线预约</h1 -->
    </div>
    <div id="toast" style="display: none;">
      <div class="weui-mask_transparent"></div>
      <div class="weui-toast">
        <i class="weui-icon-info-circle weui-icon_toast"></i>
        <p class="weui-toast__content"></p>
      </div>
    </div>
    <div class="page__bd" style="height: 100%;">
      <div class="weui-tab">
        <div class="weui-navbar">
          <div class="weui-navbar__item" onclick="window.location='${Base}/wx/myReserve'">
            我的预约
          </div>
          <div class="weui-navbar__item" onclick="window.location='${Base}/wx/toReserve'">
            预约体检（通用）
          </div>
          <div class="weui-navbar__item weui-bar__item_on">
            预约体检(信立泰)
          </div>
        </div>
        <div class="weui-tab__panel">
        </div>
      </div>
    </div>
    <div class="page__bd">
      <div class="weui-cells__title"><h1>客户预约</h1></div>
      <div class="weui-cells">
        <form id="reserveForm" method="post" action="${Base}/wx/reserve">
          <div class="weui-cell">
            <div class="weui-cell__hd">
              <label class="weui-label">单位名称</label>
            </div>
            <div class="weui-cell__bd">
              <input class="weui-input" type="text" id="customer" name="customer" placeholder="信立泰" value="信立泰" readonly="readonly" maxlength="20"/>
            </div>
            <div class="weui-cell__ft">
            </div>
          </div>
          <div class="weui-cell">
            <div class="weui-cell__hd">
              <label class="weui-label">姓名</label>
            </div>
            <div class="weui-cell__bd">
              <input class="weui-input" name="name" id="name" type="text" placeholder="请输入体检人姓名"/>
            </div>
            <div class="weui-cell__ft">
            </div>
          </div>
          <div class="weui-cell">
            <div class="weui-cell__hd">
              <label class="weui-label">手机号</label>
            </div>
            <div class="weui-cell__bd">
              <input class="weui-input" type="text" id="mobile" name="mobile" placeholder="请输入手机号" pattern="1[0-9]{10}"/>
            </div>
            <div class="weui-cell__ft">
            </div>
          </div>
          <div class="weui-cell">
            <div class="weui-cell__hd">
              <label class="weui-label">身份证号</label>
            </div>
            <div class="weui-cell__bd">
              <input class="weui-input" name="identity" id="identity" type="text" placeholder="请输入18位身份证号" pattern="[0-9]{18}"/>
            </div>
            <div class="weui-cell__ft">
            </div>
          </div>
          <div class="weui-cell">
            <div class="weui-cell__hd">
              <label class="weui-label">预约时间</label>
            </div>
            <div class="weui-cell__bd">
              <input class="weui-input" type="text" placeholder="请选择预约日期" id="reserveDate" name="reserveDate"/>
            </div>
            <div class="weui-cell__ft">
            </div>
          </div>
          <div class="weui-cell">
            <div class="weui-cell__hd">
              <label class="weui-label">备注</label>
            </div>
            <div class="weui-cell__bd">
              <input class="weui-input" name="comments" id="comments" type="text" placeholder="如有特殊要求请备注"/>
            </div>
            <div class="weui-cell__ft">
            </div>
          </div>
          <div class="weui-cells__title"><h4>以下服务机构信息（非必选)</h4></div>
          <div class="weui-cell weui-cell_select weui-cell_select-after">
            <div class="weui-cell__hd">
              <label for="city" class="weui-label">城市</label>
            </div>
            <div class="weui-cell__bd">
              <select id="city" name="city" class="weui-select" onchange="fillInst(this.value,'institution','branch','address')">
                <option value="">请选择城市</option>
                <option value="阿克苏">阿克苏</option>
                <option value="安庆">安庆</option>
                <option value="安阳">安阳</option>
                <option value="百色">百色</option>
                <option value="蚌埠">蚌埠</option>
                <option value="包头">包头</option>
                <option value="保定">保定</option>
                <option value="北京">北京</option>
                <option value="滨州">滨州</option>
                <option value="沧州">沧州</option>
                <option value="常德">常德</option>
                <option value="常熟">常熟</option>
                <option value="常州">常州</option>
                <option value="巢湖">巢湖</option>
                <option value="朝阳">朝阳</option>
                <option value="潮州">潮州</option>
                <option value="郴州">郴州</option>
                <option value="成都">成都</option>
                <option value="承德">承德</option>
                <option value="池州">池州</option>
                <option value="赤峰">赤峰</option>
                <option value="重庆">重庆</option>
                <option value="滁州">滁州</option>
                <option value="打通-大同">打通-大同</option>
                <option value="大连">大连</option>
                <option value="大庆">大庆</option>
                <option value="丹东">丹东</option>
                <option value="东莞">东莞</option>
                <option value="都匀">都匀</option>
                <option value="恩施">恩施</option>
                <option value="佛山">佛山</option>
                <option value="福州">福州</option>
                <option value="阜阳">阜阳</option>
                <option value="赣州">赣州</option>
                <option value="广安">广安</option>
                <option value="广元">广元</option>
                <option value="广州">广州</option>
                <option value="贵阳">贵阳</option>
                <option value="桂林">桂林</option>
                <option value="桂平">桂平</option>
                <option value="哈尔滨">哈尔滨</option>
                <option value="海口">海口</option>
                <option value="邯郸">邯郸</option>
                <option value="汉中">汉中</option>
                <option value="杭州">杭州</option>
                <option value="和田">和田</option>
                <option value="菏泽">菏泽</option>
                <option value="鹤岗（升级到佳木斯）">鹤岗（升级到佳木斯）</option>
                <option value="衡水">衡水</option>
                <option value="衡阳">衡阳</option>
                <option value="呼和浩特">呼和浩特</option>
                <option value="湖州">湖州</option>
                <option value="葫芦岛（升级到锦州）">葫芦岛（升级到锦州）</option>
                <option value="怀化">怀化</option>
                <option value="淮北">淮北</option>
                <option value="淮南">淮南</option>
                <option value="黄冈">黄冈</option>
                <option value="黄山">黄山</option>
                <option value="惠州">惠州</option>
                <option value="鸡西（升级到牡丹江）">鸡西（升级到牡丹江）</option>
                <option value="吉林">吉林</option>
                <option value="吉首">吉首</option>
                <option value="济南">济南</option>
                <option value="济宁">济宁</option>
                <option value="济源">济源</option>
                <option value="佳木斯">佳木斯</option>
                <option value="嘉兴">嘉兴</option>
                <option value="江门">江门</option>
                <option value="江阴">江阴</option>
                <option value="金华">金华</option>
                <option value="锦阳">锦阳</option>
                <option value="锦州">锦州</option>
                <option value="晋城">晋城</option>
                <option value="晋江（升级到泉州）">晋江（升级到泉州）</option>
                <option value="晋中">晋中</option>
                <option value="荆门">荆门</option>
                <option value="荆州">荆州</option>
                <option value="景德镇">景德镇</option>
                <option value="九江">九江</option>
                <option value="喀什">喀什</option>
                <option value="克拉玛依">克拉玛依</option>
                <option value="昆明">昆明</option>
                <option value="昆山">昆山</option>
                <option value="莱芜">莱芜</option>
                <option value="兰州">兰州</option>
                <option value="廊坊">廊坊</option>
                <option value="乐清（升级到温州）">乐清（升级到温州）</option>
                <option value="乐山">乐山</option>
                <option value="溧阳（升级到宜兴）">溧阳（升级到宜兴）</option>
                <option value="连云港">连云港</option>
                <option value="辽阳">辽阳</option>
                <option value="辽源（升级到四平）">辽源（升级到四平）</option>
                <option value="聊城">聊城</option>
                <option value="临沂">临沂</option>
                <option value="浏阳（升级到长沙）">浏阳（升级到长沙）</option>
                <option value="柳州">柳州</option>
                <option value="六安">六安</option>
                <option value="龙港（升级到深圳）">龙港（升级到深圳）</option>
                <option value="娄底">娄底</option>
                <option value="吕梁">吕梁</option>
                <option value="洛阳">洛阳</option>
                <option value="马鞍山">马鞍山</option>
                <option value="梅州">梅州</option>
                <option value="牡丹江">牡丹江</option>
                <option value="南昌">南昌</option>
                <option value="南京">南京</option>
                <option value="南宁">南宁</option>
                <option value="南通">南通</option>
                <option value="南阳">南阳</option>
                <option value="宁波">宁波</option>
                <option value="宁德">宁德</option>
                <option value="攀枝花">攀枝花</option>
                <option value="盘锦">盘锦</option>
                <option value="萍乡">萍乡</option>
                <option value="濮阳">濮阳</option>
                <option value="齐齐哈尔">齐齐哈尔</option>
                <option value="钦州（升级到南宁）">钦州（升级到南宁）</option>
                <option value="秦皇岛">秦皇岛</option>
                <option value="青岛">青岛</option>
                <option value="清远">清远</option>
                <option value="衢州">衢州</option>
                <option value="泉州">泉州</option>
                <option value="日照">日照</option>
                <option value="三门峡">三门峡</option>
                <option value="三明">三明</option>
                <option value="三亚">三亚</option>
                <option value="厦门">厦门</option>
                <option value="汕头">汕头</option>
                <option value="商洛">商洛</option>
                <option value="商丘">商丘</option>
                <option value="上海">上海</option>
                <option value="韶关">韶关</option>
                <option value="邵阳">邵阳</option>
                <option value="绍兴">绍兴</option>
                <option value="深圳">深圳</option>
                <option value="沈阳">沈阳</option>
                <option value="十堰">十堰</option>
                <option value="石河子（升级到乌鲁木齐）">石河子（升级到乌鲁木齐）</option>
                <option value="石家庄">石家庄</option>
                <option value="石门（升级到常德）">石门（升级到常德）</option>
                <option value="四川乐山">四川乐山</option>
                <option value="松原">松原</option>
                <option value="苏州">苏州</option>
                <option value="宿迁">宿迁</option>
                <option value="宿州">宿州</option>
                <option value="遂宁">遂宁</option>
                <option value="台州">台州</option>
                <option value="太仓">太仓</option>
                <option value="太原">太原</option>
                <option value="泰安">泰安</option>
                <option value="泰州">泰州</option>
                <option value="唐山">唐山</option>
                <option value="滕州">滕州</option>
                <option value="天津">天津</option>
                <option value="铁岭">铁岭</option>
                <option value="通化">通化</option>
                <option value="铜陵">铜陵</option>
                <option value="铜仁（升级到怀化）">铜仁（升级到怀化）</option>
                <option value="威海">威海</option>
                <option value="潍坊">潍坊</option>
                <option value="温州">温州</option>
                <option value="乌鲁木齐">乌鲁木齐</option>
                <option value="无锡">无锡</option>
                <option value="芜湖">芜湖</option>
                <option value="武汉">武汉</option>
                <option value="西安">西安</option>
                <option value="西昌">西昌</option>
                <option value="西宁">西宁</option>
                <option value="咸阳">咸阳</option>
                <option value="湘潭">湘潭</option>
                <option value="襄阳">襄阳</option>
                <option value="新乡">新乡</option>
                <option value="新余">新余</option>
                <option value="邢台">邢台</option>
                <option value="兴义">兴义</option>
                <option value="徐州">徐州</option>
                <option value="许昌">许昌</option>
                <option value="宣城">宣城</option>
                <option value="烟台">烟台</option>
                <option value="延安">延安</option>
                <option value="延边">延边</option>
                <option value="阳泉">阳泉</option>
                <option value="伊宁">伊宁</option>
                <option value="宜宾">宜宾</option>
                <option value="宜昌">宜昌</option>
                <option value="宜春">宜春</option>
                <option value="宜兴">宜兴</option>
                <option value="益阳">益阳</option>
                <option value="银川">银川</option>
                <option value="鹰潭">鹰潭</option>
                <option value="营口">营口</option>
                <option value="永州">永州</option>
                <option value="榆林">榆林</option>
                <option value="玉林">玉林</option>
                <option value="玉溪">玉溪</option>
                <option value="岳阳">岳阳</option>
                <option value="运城">运城</option>
                <option value="枣庄">枣庄</option>
                <option value="湛江(升级到阳江）">湛江(升级到阳江）</option>
                <option value="张家港">张家港</option>
                <option value="张家口">张家口</option>
                <option value="长春">长春</option>
                <option value="长沙">长沙</option>
                <option value="长治">长治</option>
                <option value="肇庆">肇庆</option>
                <option value="镇江">镇江</option>
                <option value="郑州">郑州</option>
                <option value="中山">中山</option>
                <option value="周口">周口</option>
                <option value="株洲">株洲</option>
                <option value="珠海">珠海</option>
                <option value="诸暨（升级到义乌）">诸暨（升级到义乌）</option>
                <option value="驻马店">驻马店</option>
                <option value="淄博">淄博</option>
                <option value="自贡">自贡</option>
                <option value="遵义">遵义</option>
              </select>
            </div>
          </div>
          <div class="weui-cell weui-cell_select weui-cell_select-after">
            <div class="weui-cell__hd">
              <label for="institution" class="weui-label">机构</label>
            </div>
            <div class="weui-cell__bd">
              <select id="institution" name="institution" class="weui-select" onchange="fillBranch(this.value, 'branch','address')">
                <option value="">请选择机构</option>
              </select>
            </div>
          </div>
          <div class="weui-cell weui-cell_select weui-cell_select-after" id="branchContainer">
            <div class="weui-cell__hd">
              <label for="branch" class="weui-label">分院</label>
            </div>
            <div class="weui-cell__bd">
              <select id="branch" name="branch" class="weui-select" onchange="fillAddress(this, 'address')">
                <option value="">请选择分院</option>
              </select>
            </div>
          </div>
          <div class="weui-cell" id="addressContainer">
            <div class="weui-cell__hd">
              <label for="address" class="weui-label">地址</label>
            </div>
            <div class="weui-cell__bd"><textarea class="weui-textarea" id="address" name="address" readonly="readonly" rows="5"></textarea></div>
            <div class="weui-cell__ft">
            </div>
          </div>
          <a href="javascript:;" class="weui-btn weui-btn_primary">预&nbsp;&nbsp;约</a>
        </form>
      </div>
    </div>
  </div>
  <div class="page" id="successMsg" style="display:none;">
    <div class="weui-msg">
      <div class="weui-msg__icon-area"><i class="weui-icon-success weui-icon_msg"></i></div>
      <div class="weui-msg__text-area">
        <h2 class="weui-msg__title">操作成功</h2>
        <p class="weui-msg__desc">您的预约请求已成功送达，预约成功会有短信通知发送到您的手机上，敬请查收。</p>
      </div>
      <div class="weui-msg__opr-area">
        <p class="weui-btn-area">
          <a href="javascript:window.location='${Base}/wx/myReserve'" class="weui-btn weui-btn_primary">查看我的预约</a>
          <a href="javascript:history.back();" class="weui-btn weui-btn_default">返回</a>
        </p>
      </div>
      <div class="weui-msg__extra-area">
        <div class="weui-footer">
          <p class="weui-footer__links">
            <a href="javascript:void(0);" class="weui-footer__link"></a>
          </p>
          <p class="weui-footer__text"></p>
        </div>
      </div>
    </div>
  </div>
  <script src="${Base}/js/jquery-2.1.4.js"></script>
  <script src="${Base}/js/form.js"></script>
  <script language="javascript" src="${Base}/js/jquery-weui.min.1115.js"></script>
  <script language="javascript">
      $(function(){
          var nTime = new Date();
          nTime.setDate(nTime.getDate()+6);
          var y= nTime.getFullYear();
          var m= (nTime.getMonth()+1);
          var d= nTime.getDate();
          m = (m < 10?"0" + m : m);
          d = (d < 10?"0" + d : d);
          var minDate = y + "-" + m + "-" + d;
          if(minDate <= "2017-02-07"){
              minDate = "2017-02-08";
          }
          $("#reserveDate").val(minDate);
          $("#reserveDate").calendar({
              value: [minDate],
              minDate: minDate,
              onChange:function(p, values, displayValues){
                  d = values[0].replace(/-/g,"/");
                  var date = new Date(str);
                  if(date.getDay() == 0 || date.getDay() == 6){
                      showToast(d + "已约满，请选择其他日期！");
                      $("#reserveDate").val("");
                  }
              }
          });
          var showToast=function(content) {
              $.notification({title: "提示", text: content});
          };
          $(".weui-btn_primary").on("click", function() {
              /*if ($("#city").val() == "") {
                  showToast("请选择城市");
                  return false;
              }
              if ($("#institution").val() == "") {
                  showToast("请选择机构");
                  return false;
              }
              if ($("#branch").children().length>1 && $("#branch").val() == "") {
                  showToast("请选择分院");
                  return false;
              }*/
              if ($("#customer").val() == ""){
                  showToast("请输入单位名称")
                  return  false;
              }
              if ($("#name").val() == ""){
                  showToast("请输入姓名")
                  return  false;
              }
              if ($("#mobile").val() == ""){
                  showToast("请输入手机号")
                  return  false;
              }
              if ($("#identity").val() == ""){
                  showToast("请输入身份证号")
                  return  false;
              }
              if ($("#reserveDate").val() == ""){
                  showToast("请选择预约日期")
                  return  false;
              }
              $('#reserveForm').ajaxSubmit(function (data) {
                  if (data.errno == "1") {
                      showToast(data.errdesc);
                  } else {
                      window.location ="${Base}/wx/success";
                      return;
                      reservePage = $("#reservePage");
                      reservePage.hide();
                      successMsg = $("#successMsg");
                      if (successMsg.css('display') != 'none') return;
                      successMsg.fadeIn(100);
                  }
              });

          });
      });
  </script>
</body>
</html>
